<template>
  <div>
    <!-- 头部返回按钮 -->
    <div class="header">
      <div
        class="text"
        @click="okk"
      >
        <i class="iconfont icon-back"></i>
        <span class="text1">
          <i class="iconfont icon-fanhui"></i>
          科普文章
        </span>
      </div>
    </div>

    <!-- 推文详细内容 -->
    <div class="title">{{details.title}}</div>

    <!-- announce detail -->
    <div class="detail">
      <div class="address">主治医师</div>
      <div
        class="button"
        @click="toSubscribe"
      >{{ subscribe ? "已订阅":"+订阅" }}</div>
    </div>

    <!-- announce body -->
    <div class="announce-body">
      <p
        width="100%"
        v-html="details.content"
      />
    </div>

    <!-- announce  time-->
    <div class="announce-time">{{details.release_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</div>

    <!-- 点赞 分享 -->
    <div class="announce-dynamic">
      <el-button
        size="medium"
        @click="giveLike"
      ><i class="iconfont icon-dianzan"></i>点赞</el-button>
      <el-button size="medium"><i class="iconfont icon-fenxiang"></i>分享</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      details: "",
    };
  },
  created() {
    this.getAnnounceDetail();
  },
  methods: {
    getAnnounceDetail() {
      // eslint-disable-next-line camelcase
      const announce_id = this.$route.params.announce_id;
      const params = {
        announce_id: announce_id,
        user_id: this.$store.getters["user/id"],
      };
      this.$http.post("/getAnnounceDetail", params).then((res) => {
        console.log(res.data);
        if (res.data.code === "1") {
          this.details = res.data.data;
        }
      });
    },
    toSubscribe() {
      console.log(this.announce.region_id);
      const params = {
        user_id: this.$store.getters["user/id"],
        sub_id: this.announce.region_id,
      };

      if (this.subscribe) {
        this.$http.post("/cancelSub", params).then((res) => {
          console.log(res.data);
          if (res.data.code === "1") {
            this.subscribe = false;
          }
        });
      } else {
        this.$http.post("/addSubscribe", params).then((res) => {
          console.log(res.data);
          if (res.data.code === "1") {
            this.subscribe = true;
          }
        });
      }
    },

    okk() {
      this.$router.go(-1); // 返回上一层
    },
    giveLike() {
      const id = this.announce.announce_id;
      this.$http.get("/addLiked/" + id).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>

<style scoped>
.header {
  height: 1.5rem;
  width: 100%;
  background: #96d596;
}
.text {
  padding-top: 4%;
  font-size: 0.55rem;
  color: white;
}
.iconfont {
  font-size: 0.55rem;
}

.detail {
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 2px;
  /* border-bottom: 1px solid #ccc */
}
.detail .address {
  font-size: 16px;
  color: grey;
  margin-left: 10px;
  /* margin-bottom: 30px; */
}
.detail .button {
  background: #04c6fb;
  width: 70px;
  height: 23px;
  font-size: 16px;
  color: aliceblue;
  text-align: center;
  vertical-align: middle;
  margin-right: 10px;
}
.title {
  margin: 10px;
  font-size: 18px;
}
.announce-body {
  /* margin:10px; */
  padding: 10px;
  text-indent: 2em;
  text-align: justify;
}
.img {
  margin: 10px;
  width: 80%;
  height: 180px;
  /* flex-shrink: 0; */
}
.announce-time {
  margin: 10px;
  color: #ccc;
}
.announce-dynamic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px 50px 20px 50px;
  padding: 2px;
}
.img {
  margin-top: 5px;
  height: 160px;
  width: 95%;
  text-align: center;
  margin-bottom: 10px;
}
</style>
